<template>
	<!-- 搜索组件 -->
	<view class="search" :class="{ focused: focused }">
		<!-- 搜索区域 -->
		<view class="search-input" @click="goSearch">
			<input type="text" :placeholder="placeholder" v-model="searchText" @input="searchQuery"
				@confirm="addHistory">
			<text class="cancel" @click.stop="cancelSearch">取消</text>
		</view>
		<!-- 搜索内容 -->
		<view class="search-content">
			<!-- 搜索历史 -->
			<view class="title">搜索历史<text class="clear" @click="clearHistory"></text></view>
			<view class="history">
				<navigator v-for="item in historyList" :key="item" url="/subpkg/pages/list/index">{{item}}</navigator>
			</view>
			<!-- 搜索结果列表 -->
			<scroll-view scroll-y class="result" v-if="searchList.length">
				<navigator v-for="item in searchList" :key="item.goods_id" url="/subpkg/pages/goods/index">
					{{item.goods_name}}
				</navigator>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	export default {
		data() {
			return {
				focused: false,
				placeholder: '',
				searchList: [],
				searchText: '',
				historyList: uni.getStorageSync('historyList') || []
			}
		},
		methods: {
			// 点击搜索框
			goSearch() {
				this.focused = true
				this.placeholder = '请输入您想要搜索的内容'
				// console.log(uni.getSystemInfoSync().windowHeight);
				// 获取窗口高度，传递给父组件，禁止滚动
				this.$emit('search', uni.getSystemInfoSync().windowHeight + 'px')
				// 隐藏tabbar
				uni.hideTabBar()
			},
			// 点击取消
			cancelSearch() {
				this.focused = false
				this.placeholder = ''

				// 恢复页面滚动
				this.$emit('search', 'auto')

				// 显示tabbar
				uni.showTabBar()

				// 清空输入框内容
				this.searchText = ''
				// 清空搜索列表数据
				this.searchList = []
			},
			// 输入内容时，会触发的函数
			searchQuery: debounce(async function() {
				if (this.searchText === '') {
					this.searchList = []
					return
				}
				// 调用接口，获取搜索结果列表数据
				const res = await uni.$http.get('/api/public/v1/goods/search', {
					query: this.searchText
				})
				// console.log(res);
				this.searchList = res.data.message.goods
			}, 500),
			// 按下移动端键盘中的确认按钮时，触发
			addHistory() {
				if (this.searchText.trim() === '') return
				if (this.historyList.includes(this.searchText)) return
				// 将搜索内容存入搜索历史数组
				this.historyList.push(this.searchText)
				// 将搜索历史数组存入本地
				uni.setStorageSync('historyList', this.historyList)
			},
			// 清除历史记录数据
			clearHistory() {
				// 清除组件中的数据
				this.historyList = []
				// 清除本地的数据
				uni.removeStorageSync('historyList')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		display: flex;
		flex-direction: column;

		&.focused {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 9;

			.search-input {
				background-color: #eee;

				&::before {
					display: none;
				}

				&::after {
					display: block;
				}

				.cancel {
					display: block;
				}
			}

			.search-content {
				display: block;
			}
		}

		// 搜索区域
		.search-input {
			display: flex;
			height: 100rpx;
			padding: 20rpx 30rpx;
			background-color: #ea4451;
			box-sizing: border-box;
			position: relative;

			// 放大镜图标 + 搜索文字（输入框中间）
			&::before {
				display: block;
				content: '搜索';
				width: 100rpx;
				height: 44rpx;
				line-height: 1;
				position: absolute;
				top: 28rpx;
				left: 325rpx;
				z-index: 9;
				background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
				background-size: 32rpx;
				background-position: 6rpx center;
				background-repeat: no-repeat;
				padding: 11rpx 0 10rpx 44rpx;
				box-sizing: border-box;
				color: #666;
				font-size: 24rpx;
			}

			// 放大镜图标（输入框左侧）
			&::after {
				display: none;
				content: '';
				width: 44rpx;
				height: 44rpx;
				line-height: 1;
				position: absolute;
				top: 28rpx;
				left: 40rpx;
				z-index: 9;
				background-image: url(http://static.botue.com/ugo/images/icon_search%402x.png);
				background-size: 32rpx;
				background-position: 6rpx center;
				background-repeat: no-repeat;
			}

			// input输入框
			input {
				flex: 1;
				height: 60rpx;
				padding: 0 20rpx 0 64rpx;
				background-color: #fff;
				border-radius: 8rpx;
				font-size: 24rpx;
				color: #666;
			}

			// 取消文字按钮
			.cancel {
				display: none;
				width: 80rpx;
				text-align: right;
				line-height: 60rpx;
				font-size: 27rpx;
				color: #666;
			}
		}

		// 搜索内容
		.search-content {
			display: none;
			flex: 1;
			padding: 27rpx;
			background-color: #fff;
			position: relative;

			// 搜索历史文字
			.title {
				font-size: 27rpx;
				line-height: 1;
				color: #333;
			}

			// 清除按钮
			.clear {
				display: block;
				width: 27rpx;
				height: 27rpx;
				float: right;
				background-image: url(http://static.botue.com/ugo/images/clear.png);
				background-size: cover;
			}

			// 搜索历史
			.history {
				padding-top: 30rpx;

				navigator {
					display: inline-block;
					line-height: 1;
					padding: 15rpx 20rpx 12rpx;
					background-color: #ddd;
					font-size: 24rpx;
					margin-right: 20rpx;
					margin-bottom: 15rpx;
					color: #333;
				}
			}

			// 搜索结果列表
			.result {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background-color: #fff;

				navigator {
					line-height: 1;
					padding: 20rpx 30rpx;
					font-size: 24rpx;
					color: #666;
					border-bottom: 1px solid #eee;

					&:last-child {
						border-bottom: none;
					}
				}
			}
		}
	}
</style>
